<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<link rel="stylesheet" th:href="@{/css/bootstrap.css}">-->

    <!-- CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
    <!-- jQuery and JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <script src="https://cdn.bootcss.com/jquery/3.6.3/jquery.js"></script>

</head>
<body class="p-0 m-0">

<div>
    <nav class="navbar navbar-dark bg-dark">
        <a class="navbar-brand" th:href="@{'/ziroom_portal/production/productionList'}">首页</a>

        <ul class="nav justify-content-end">
            <li class="nav-item">
                <a class="nav-link active" th:if="${!#strings.isEmpty(session.userInfo)}" th:href="@{'/ziroom_portal/user/logout'}">退出</a>
            </li>
        </ul>

    </nav>
</div>
<p/>

<div class="container">
    <div>
        <h3 class="text-center bg-info p-3 m-3 text-white">订 单</h3>
    </div>

    <div>
        <form action="/ziroom_portal/order/createOrder">
        <div class="form-group row">
            <div class="col-md-2 form-group">
                <select class="custom-select" id="provinces" name="provinces">
                    <option selected>请选择地址</option>
                    <option th:each="provinces,provinceStat: ${provincesList}" th:text="${provinces.name}" th:data-id="${provinces.code}"></option>
                </select>
            </div>

            <div class="col-md-2 form-group">
                <select class="custom-select" id="city" name="city">

                </select>
            </div>

            <div class="col-md-2 form-group">
                <select class="custom-select" id="area" name="area">

                </select>
            </div>

            <div class="col-md-2 form-group">
                <select class="custom-select" id="street" name="street">

                </select>
            </div>

            <div class="col-md-2 form-group">
                <select class="custom-select" id="village" name="village">

                </select>
            </div>

        </div>
            <div class="form-group">
                <label for="textarea">详细地址:</label>
                <textarea name="address" class="form-control" id="textarea" rows="3"></textarea>
            </div>

            <div>
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th scope="col">商品ID</th>
                        <th scope="col">商品</th>
                        <th scope="col">图片</th>
                        <th scope="col">单价</th>
                        <th scope="col">数量</th>
                        <th scope="col">小计</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="cartItem,cartItemStat:${cartItemList}">
                        <td>
                            <span th:text="${cartItem.productionVo.productionId}" class="selectItem" th:data-id="${cartItem.productionVo.productionId}" th:data-sub-total="${cartItem.subTotal}"></span>
                        </td>
                        <td th:text="${cartItem.productionVo.productionName}"></td>
                        <td>
                            <img  th:each="i,imageStat:${cartItem.productionVo.imageList}"  th:if="${imageStat.index == 0}" th:src="${i.imageUrl}"
                                  style="width: 30px ; height: 40px"
                                  th:alt="cartItem.productionVo.productionIntroduction">
                        </td>
                        <td th:text="${cartItem.productionVo.productionPrice}"></td>
                        <td>
                            <span id="buyCount" th:text="${cartItem.buyCount}"></span>
                        </td>
                        <td th:text="${cartItem.subTotal}"></td>
                    </tr>
                    <tr>
                        <td>合计: </td>
                        <td colspan="5">
                            ￥: <span name="total" id="total" style="color: red" th:text="${total}"></span>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>

            <button type="button" th:onclick="submitButton()" class="btn btn-primary">提交订单</button>
        </form>
    </div>

</div>
<script th:src="@{/js/jquery-3.6.3.js}"></script>
<script>
    $(function (){

        //省 找出 市
        $("#provinces").change(function (){
            $.ajax({
                type: "post",
                url:"/ziroom_portal/cities/showCities",
                data:{
                    "provinces":$("#provinces").val()
                },
                success:function (data){
                    let content = "<option selected>Open this select menu</option>";
                    $.each($(data),function (index,element){
                        content += "<option value='"+element.code+"'>"+element.name+"</option>"
                    })
                    $("#city").html(content);
                }
            })
        })

        //市 找出 区
        $("#city").change(function (){
            $.ajax({
                type: "post",
                url:"/areas/showAreas",
                data:{
                    "cityName":$("#city").val()
                },
                success:function (data){
                    let content = "<option selected>Open this select menu</option>";
                    $.each($(data),function (index,element){
                        content += "<option value='"+element.code+"'>"+element.name+"</option>"
                    })
                    $("#area").html(content);
                }
            })
        })

        // 区 找出 街道

        $("#area").change(function (){
            $.ajax({
                type: "post",
                url:"/streets/showStreets",
                data:{
                    "areaCode":$("#area").val()
                },
                success:function (data){
                    let content = "<option selected>Open this select menu</option>";
                    $.each($(data),function (index,element){
                        content += "<option value='"+element.code+"'>"+element.name+"</option>"
                    })
                    $("#street").html(content);
                }
            })
        })

        // 街道 找出 村


        $("#street").change(function (){
            $.ajax({
                type: "post",
                url:"/ziroom_portal/villages/showVillages",
                data:{
                    "streetCode":$("#street").val()
                },
                success:function (data){
                    let content = "<option selected>Open this select menu</option>";
                    $.each($(data),function (index,element){
                        content += "<option value='"+element.code+"'>"+element.name+"</option>"
                    })
                    $("#village").html(content);
                }
            })
        })

    })

    function submitButton(){
        //-- 商品id
        let ids = [];

        $.each($(".selectItem"),function (index,element) {
            ids.push($(element).attr("data-id"))
        })

        //alert("ids:"+ids);

        let provinces = $("#provinces").val();
        let city = $("#city").val();
        let area = $("#area").val();
        let street = $("#street").val();
        let village = $("#village").val();


        let address = $("#textarea").val();

        let total = $("#total").html();

        //alert("省:"+provinces+"市:"+city+"区:"+area+"街道:"+street+"村:"+village+"详细地址:"+address+"==总价:=="+total)

        $.post(
            "/ziroom_portal/order/createOrder",
            {
                "productionId":ids+",",
                "provinces":provinces,
                "city":city,
                "area":area,
                "street":street,
                "village":village,
                "address":address,
                "total":total
            },
            function (data){
                location.href="/payProduction?detail="+data;
            }
        )
    }

</script>
</body>
</html>